<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page isELIgnored="false"%>
<%@ include file="../common/taglibs.jsp"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>POS收单运营管理平台</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

<link href="<s:url value="/css/index.css"/>" type="text/css" rel="stylesheet" />
<link href="<s:url value="/css/common.css"/>" type="text/css" rel="stylesheet" />
<style>
	li {list-style-type:none;}
</style>
<script type="text/javascript" src="<c:url value="/js/jquery-1.9.1.min.js" />"></script>
<script type="text/javascript" src="<c:url value="/js/Chart.js" />"></script>
<script type="text/javascript" src="<c:url value="/js/My97DatePicker/WdatePicker.js"/>"></script>


</head>
<body>
	<s:form id="chartForm" action="" method="post" theme="simple">
	 <s:hidden id="params" value="%{moduleCode}"/>
	 <s:hidden id="resultList" value="%{#request.resultList}"/>
		<table class="tb">
			<tbody>
				<tr class="tb-line">
					<td class="tb-td" colspan="2"><div class="tb-h2"><font color="red">说明：查看当前代理下所有商户交易统计（不包括下级代理）</font></div></td>
				</tr>

				<tr class="tb-line" height="50px">
					<td  align="right" class="tb-td" width="50%">
						<div class="tb-h4">交易日期（时间跨度最多一个月且必须相同月份）：</div>
					</td>
					<td class="tb-td">
						<label class="tb-input-mini"> 
							<s:textfield id="minDate" name="minDate"
								onFocus="WdatePicker({dateFmt:'yyyyMMdd',readOnly:true,wdate:true,errDealMode:0});"
								theme="simple" cssClass="queryWidth" cssStyle="border:1px solid black;"/>
						</label>
						至
						<label class="tb-input-mini"> 
							<s:textfield id="maxDate" name="maxDate"
								onFocus="WdatePicker({dateFmt:'yyyyMMdd',readOnly:true,wdate:true,errDealMode:0});"
								theme="simple" cssClass="queryWidth" cssStyle="border:1px solid black;" />
						</label>
					</td>
				</tr>

				<tr class="tb-line">
					<td colspan="2" align="center">
						<font color="red"><s:actionerror /></font>
						<font color="red"><s:actionmessage /></font> 
				   </td>
				</tr>
				<tr class="tb-line">
					<td class="tb-td line-submit" align="right" colspan="2">
						<label class="tb-input-submit"> 
							<input id="lieBtn" value="查看折线图" type="button" />
						</label>
						<label class="tb-input-submit"> 
							<input id="barBtn" value="查看柱状图" type="button" />
						</label>  
					</td>
				</tr>
		</table>
	</s:form>
	<div class="big-tb">
		<table id="tableList" class="tb" style="width: 100%;">
			<tbody>
					<tr class="tb-line">
						<td class="tb-td" align="center"> 
							 <div style="width:80%;">
						        <canvas id="canvas"></canvas>
						     </div>
						</td>
						 
			</tbody>
		</table>
	</div>
</body>
<script type="text/javascript">

$(document).ready(function() {
	var datasP=null;
	var xAxis=0;
 

	//配置参数
	var config = {
            type: 'line',
            data: {
                labels: xAxis,
                datasets: datasP
            },
            options: {
                responsive: true,
                title:{
                    display:true,
                    text:'交易统计报表'
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: '日期'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: '交易金额'
                        }
                    }]
                }
            }
        };
	
	  if($("#params").val()=="1"){
		 
		 var ctx=$("#canvas");
			 ctx.context="2d"; //赋值HTML5定义绘制图形元素canvas 为2d
		 
		 var json=eval($("#resultList").val());
			 
		 
		  var datasP=new Array(json.length-1);
		for (var int = 0; int < json.length; int++) {
			var array_element = json[int];
			var obj=null;
			if(null != array_element.xAixs ){ //x轴
				config.data.labels= array_element.xAixs;
			}
			
			if(null != array_element.微信扫码){
				 
				obj={label:"微信扫码",backgroundColor: 'green',borderColor:  'green',data:array_element.微信扫码,fill:false};
			}
			if(null != array_element.支付宝扫码){
				obj={label:"支付宝扫码",backgroundColor: 'blue',borderColor:  'blue',data:array_element.支付宝扫码,fill:false};
			}
			if(null != array_element.银联扫码){
				obj={label:"银联扫码",backgroundColor: 'red',borderColor:  'red',data:array_element.银联扫码,fill:false};
			}
			if(null != array_element.消费){
				obj={label:"普通消费",backgroundColor: 'yellow',borderColor:  'yellow',data:array_element.消费,fill:false};
			}
			if(null != array_element.实时收款){
				obj={label:"实时收款",backgroundColor: 'black',borderColor:  'black',data:array_element.实时收款,fill:false};
			}
			if(null != obj){
				datasP[int]=obj;//alert(obj.label+"="+obj.data);
			}
			
			
		}
		config.data.datasets= datasP;
		new Chart(ctx, config);
	 } 
	 
	
	
    $("input[type=button]").click(function(){ 
 	 	  var mindate=$("#minDate").val(); 
 	 	  var maxdate=$("#maxDate").val();
 	 	  if( (mindate==null || mindate.length!=8 ) && (maxdate==null || maxdate.length!=8)){
 	 		  alert("请正确选择日期！");
 	 	  } 
 	 	  $("#chartForm").attr("action","line.ct");
 	 	  $("#chartForm").submit();
    });
    
});

</script>
</html>
